import { useCallback } from "react"
import { FileInfo } from "~/core/types"
import { useNavigate } from 'react-router-dom';
import { encode64, getBitSizeStr } from "~/core/core";


type props = {
    info: FileInfo
}
function Component({info}:props) {
    const navigate = useNavigate()

    const nameClick = useCallback(() => {
        if (info.isDir) {
            navigate(`?data=${encode64(info.fullName)}`)
        }
        console.log(encode64(info.fullName))
    }, [])
    return (
        <div className={info.isDir ? "info-box dir" : "info-box file"}>
            <div className="avatar">
                {info.isDir ? [] : <img alt="1" src={info.cover} />}
            </div>
            <div className="info">
                <h2><a onClick={nameClick}>{info.name}</a></h2>
                <p>
                    <span>最后修改时间：{info.lastUpdate}</span> {info.isDir ? [] : <span>文件大小：{getBitSizeStr(info.size)}</span> }
                </p>
            </div>
        </div>
    )
}

export default Component